@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes first-indicator {
    0% {
        transform: translate(0%) scaleX(0);
    }
    25% {
        transform: translate(0%) scaleX(0.5);
    }
    50% {
        transform: translate(25%) scaleX(0.75);
    }
    75% {
        transform: translate(100%) scaleX(0);
    }
    100% {
        transform: translate(100%) scaleX(0);
    }
}

@keyframes second-indicator {
    0% {
        transform: translate(0%) scaleX(0);
    }
    60% {
        transform: translate(0%) scaleX(0);
    }
    80% {
        transform: translate(0%) scaleX(0.6);
    }
    100% {
        transform: translate(100%) scaleX(0.1);
    }
}


.loading-screen {
    background-color: #f5f5f5;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 1;
    pointer-events: none;
    transition: opacity cubic-bezier(.4, 0, .2, 1) 436ms;
    z-index: 9999;

    &.available {
        opacity: 0;
    }

    .insp-logo-frame {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        animation: fadein 436ms;
        height: 98%;
    }

    .insp-logo-frame-img {
        width: 112px;
        height: 112px;
        align-self: center;
        border-radius: 50%;
    }
    .loading-screen-head {
        background-color: #c6dafc;
        height: 4px;
        overflow: hidden;
        position: relative;
    }
    & .first-indicator, & .second-indicator {
        background-color: #056D8B;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        position: absolute;
        transform-origin: left center;
        transform: scaleX(0);
    }
    .first-indicator {
        animation: first-indicator 2000ms linear infinite;
    }
    .second-indicator {
        animation: second-indicator 2000ms linear infinite;
    }
    .insp-logo {
        animation: App-logo-spin infinite 20s linear;
        border-radius: 50%;
        align-self: center;
    }
}


